<template>
  <div style="width: calc(100vw - 200px)">
    <el-tabs type="border-card" class="demo-tabs" @tab-click="changeTab" v-model="activeName">
      <el-tab-pane name="1">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><Guide /></el-icon>
            <span>全部</span>
          </span>
        </template>
        <CommunityExamine
          :dataList="communityList"
          @reexamine="reExamine"
          @delete="handlerDelete"
          @change-page="handlerChange"
          @pass="handlerPass"
          @nopass="handlerNoPass"
          :type="1"
        ></CommunityExamine>
      </el-tab-pane>
      <el-tab-pane name="2">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><Sunny /></el-icon>
            <span>未审核</span>
          </span>
        </template>
        <CommunityExamine
          :dataList="communityList"
          @reexamine="reExamine"
          @delete="handlerDelete"
          @pass="handlerPass"
          @nopass="handlerNoPass"
          :type="2"
        ></CommunityExamine>
      </el-tab-pane>
      <el-tab-pane name="3">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><Pouring /></el-icon>
            <span>未通过</span>
          </span>
        </template>
        <CommunityExamine
          :dataList="communityList"
          @reexamine="reExamine"
          @delete="handlerDelete"
          @pass="handlerPass"
          @nopass="handlerNoPass"
          :type="3"
        ></CommunityExamine>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import request from '@/util/request'
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'
import CommunityExamine from '@/components/examine/CommunityExamine.vue'

const communityList = ref({})
const currentPage = ref(1)
const activeName = ref('1')

const getCommunityList = (status) => {
  request
    .get(`/admin/community/list?currentPage=${currentPage.value}&status=${status}`)
    .then((res) => {
      console.log('获取成功：', res)
      communityList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const reExamine = (id, userId) => {
  ElMessageBox.confirm('确定要将这条内容重审吗?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      request
        .get(`/admin/community/reexamine?id=${id}&userId=${userId}`)
        .then((res) => {
          ElMessage.success('操作成功')
          changeTab(activeName)
        })
        .catch((err) => {
          if (err.response) {
            console.error(err.message)
            ElNotification({
              title: 'Error',
              message: err.message,
              type: 'error'
            })
          } else {
            ElNotification({
              title: 'Error',
              message: '网络错误',
              type: 'error'
            })
          }
        })
    })
    .catch(() => {})
}

const changeTab = (val) => {
  console.log('切换的数据', val.paneName)
  if (val.paneName === '1') {
    getCommunityList(3)
  } else if (val.paneName === '2') {
    getCommunityList(0)
  } else if (val.paneName === '3') {
    getCommunityList(2)
  }
}

const handlerChange = (val) => {
  currentPage.value = val
  if (activeName.value === '1') {
    getCommunityList(3)
  } else if (activeName.value === '2') {
    getCommunityList(0)
  } else if (activeName.value === '3') {
    getCommunityList(2)
  }
}
const handlerPass = (id, userId) => {
  ElMessageBox.confirm('确定通过这条信息吗?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      request
        .get(`/admin/community/pass?id=${id}&userId=${userId}`)
        .then((res) => {
          ElMessage.success('操作成功')
          changeTab(activeName)
        })
        .catch((err) => {
          if (err.response) {
            console.error(err.message)
            ElNotification({
              title: 'Error',
              message: err.message,
              type: 'error'
            })
          } else {
            ElNotification({
              title: 'Error',
              message: '网络错误',
              type: 'error'
            })
          }
        })
    })
    .catch(() => {})
}
const handlerNoPass = (id, userId) => {
  ElMessageBox.confirm('确定不通过这条信息吗?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      request
        .get(`/admin/community/nopass?id=${id}&userId=${userId}`)
        .then((res) => {
          ElMessage.success('操作成功')
          changeTab(activeName)
        })
        .catch((err) => {
          if (err.response) {
            console.error(err.message)
            ElNotification({
              title: 'Error',
              message: err.message,
              type: 'error'
            })
          } else {
            ElNotification({
              title: 'Error',
              message: '网络错误',
              type: 'error'
            })
          }
        })
    })
    .catch(() => {})
}
const handlerDelete = (id) => {
  ElMessageBox.confirm('确定删除这条信息吗?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      request
        .get(`/admin/community/delete?id=${id}`)
        .then((res) => {
          ElMessage.success('操作成功')
          changeTab(activeName)
        })
        .catch((err) => {
          if (err.response) {
            console.error(err.message)
            ElNotification({
              title: 'Error',
              message: err.message,
              type: 'error'
            })
          } else {
            ElNotification({
              title: 'Error',
              message: '网络错误',
              type: 'error'
            })
          }
        })
    })
    .catch(() => {})
}

onMounted(() => {
  getCommunityList(3)
})
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>
